<template>
  <div>
    <van-cell-group>
      <img :src="basicInfo.pic" alt="" />
      <span>￥{{ basicInfo.minPrice }}.00</span><br />

      <div>价格</div>
      <p>{{ basicInfo.originalPrice }}</p>
      <div>{{ basicInfo.name }}</div>
      <div>{{ basicInfo.characteristic }}</div>
    </van-cell-group>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      商品详情
    </van-divider>
    <div v-html="content" class="con"></div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="primary"
        text="加入购物车"
        @click="jiaru"
      />
      <van-goods-action-button type="primary" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { detail } from "@/api/login";
export default {
  name: "WorkspaceJsonDetail",

  data() {
    return {
      basicInfo: [],
      content: "",
    };
  },

  mounted() {
    this.showlist();
  },

  methods: {
    jiaru() {
      var obj = {
        id: this.basicInfo.id,
        name: this.basicInfo.name,
        pic: this.basicInfo.pic,
        check: true,
        price: this.basicInfo.minPrice,
      };
      this.$store.commit("Save", obj);
    },
    async showlist() {
      const res = await detail({ params: { id: this.$route.query.id } });
      //   this.data = res.data.basicInfo;
      console.log(res);
      this.basicInfo = res.data.basicInfo;
      this.content = res.data.content;
    },
  },
};
</script>

<style lang="less" scoped>
// .van-goods-action{

// }
.van-cell-group {
  p {
    text-decoration: line-through;
  }
  span {
    color: green;
  }
  img {
    width: 100%;
    height: 250px;
  }
}
.con /deep/ img {
  width: 100%;
  height: 400px;
}
</style>